<template>
  <div>
    <el-dialog
      title="编辑"
      :visible="visible"
      width="80%"
      @close="visible = false"
      :close-on-click-modal="false"
    >
      <controlPanel ref="controlPanel" :isEdit="isEdit"></controlPanel>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="confirm" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dynamicCol from "./components/dynamicCol";
import dynamicContainer from "./components/dynamicContainer";
import controlPanel from "./controlPanel";

export default {
  components: { dynamicCol, dynamicContainer, controlPanel },
  props: {},
  watch: {
    value: {
      handler() {
        //this.load();
      },
      deep: true,
    },
    visible(newVal, oldVal) {
      if (!newVal && oldVal) this.hide();
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  data() {
    return {
      loading: false,
      visible: false,
      defaultLabelWidth: "150px",
      isEdit: true,
      isEditForm: false,
      controls: [],
      value: {},
    };
  },
  methods: {
    confirm() {
      this.commit();
    },
    show(value) {
      this.visible = true;
      let _this = this;
      this.$nextTick(()=>{
        _this.$refs.controlPanel.setValue(value.controls, {});
      })
      
    },
    hide() {
      this.visible = false;
      this.value = {};
      this.control = {};
    },
    loadData(value) {},
    commit() {
      this.hide();
    },
    bindModel(control) {
      if (!control) control = {};
      if (!this.value[control.field])
        this.$set(this.value, control.field, control.default);
      return this.value;
    },
  },
};
</script>

<style></style>
